<template>
  <div ref="earnings" class="earnings" />
</template>

<script>
import * as echarts from 'echarts/core'
import {
  PieChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  CanvasRenderer
} from 'echarts/renderers'

// 注册必须的组件
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, PieChart, CanvasRenderer]
)
export default {
  name: 'Earnings',
  mounted() {
    var myChart = echarts.init(this.$refs.earnings)
    myChart.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20
      },
      color: ['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#13c2c2'],
      series: [
        {
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'center',
            fontSize: '14',
            formatter: '平台总收益',
            color: '#666'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '40',
              fontWeight: 'normal'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 44361, name: '家用电器' },
            { value: 24644, name: '食用酒水' },
            { value: 19715, name: '个护健康' },
            { value: 12322, name: '服饰箱包' },
            { value: 11091, name: '母婴产品' },
            { value: 11091, name: '其他' }
          ]
        }
      ]
    })
  }
}
</script>

<style lang="scss" scoped>
.earnings {
  height: 100%;
  width: 100%;
}
</style>
